<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create Embeddable Code to display multiple Feeds and Datastreams</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
 
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>
 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.json-2.2.js" type="text/javascript"></script>

 
<script type="text/javascript">
// Derived from
// http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid
function emptyrow() {return {feed:"", datastream:""};}
jQuery(document).ready(function(){ 
jQuery("#list").jqGrid({
	datatype: "local",
	height: 250,
   	colNames:['Feed','Datastream'],
   	colModel:[
   		{name:'feed',index:'feed', width:200, editable:true,  sortable:false},
   		{name:'datastream',index:'datastream', width:200, editable:true, sortable:false}
   	],
   	multiselect: false,
        cellEdit: false, 
        cellsubmit:'clientArray',
        height: "100%",
   	editurl:'shouldntneedthis.php',
   	caption: "Feeds and Datastreams"
});
var mydata = [
		{feed:"6001",datastream:"2"},
		];
for(var i=0;i<=mydata.length;i++)
	jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
$("#adddata").click(function(){
        // var empty = function() {return {feed:"", datastream:""};)();
        // var empty = {feed:"", datastream:""};
        // var empty = emptyrow();
        // jQuery("#list").jqGrid('addRowData',jQuery("list").getRowData.length+1,empty);
	jQuery("#list").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
	// jQuery("#list").jqGrid('editRow',"new",true);
});
$("#editdata").click(function(){
	var gr = jQuery("#list").jqGrid('getGridParam','selrow');
	if( gr != null ) jQuery("#list").jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false});
	// if( gr != null ) jQuery("#list").jqGrid('editRow',gr,true);
	else alert("Please Select Row");
});
$("#delete").click(function(){
	var gr = jQuery("#list").jqGrid('getGridParam','selrow');
	if( gr != null ) jQuery("#list").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
	else alert("Please Select Row to delete!");
});
$("#createcode").click(function(){
        var stacked = jQuery('#stacked').is(':checked');
        // alert(jQuery.toJSON(jQuery("#list").getRowData()));
        var d = jQuery("#list").getRowData();
        var a=[];
        for (var i=0; i<d.length; i++) {
            a[i]=[d[i].feed,d[i].datastream];
        }
        jQuery("#code").val('<script type="text/javascript" src="http://www.google.com/jsapi"><'+'/script>'
            +'<script language="JavaScript" src="'
            //+'file:///C:/Documents%20and%20Settings/Michael/My%20Documents/dms/UniServer/udrive/www/local/googlecode/tinyprojects/pachube/stacked_area/viz.formatted.js'
            +'http://tinyprojects.googlecode.com/svn/trunk/pachube/stacked_area/viz.formatted.js'
            +'"><'+'/script>'
            +'<script language="JavaScript">PCHBVZ.createViz('+jQuery.toJSON(a)+','+stacked+','
            +jQuery('#wid').val()+','+jQuery('#hei').val()+',"'+jQuery('#graph_colour').val()+'");<'+'/script>').select();
});
$("#try").click(function(){
        var recipe =  window.open('','Test','scrollbars=1');
        var html = '<html><head><title>Sensor Data</title></head><body><div id="myprintrecipe">' 
           + jQuery('#code').val() + '</div></body></html>';
        recipe.document.open();
        recipe.document.write(html);
        recipe.document.close();

        return false;

});
});

</script>
 
</head>
<body>
<h1>Create Embeddable Code to display multiple Feeds and Datastreams</h1>

<table id="list"></table> 
<input type="BUTTON" id="adddata" value="Add" />
<input type="BUTTON" id="editdata" value="Edit" />
<input type="BUTTON" id="delete" value="Delete"/>
<br />
<ul>
<li><h2><input type="checkbox" id="stacked" /><label for="stacked">Stacked</h2></label></li>
<li id="set_colour" class="hide"> 
<h2>What size would you like your graph to be?</h2> 
<table cellpadding="0" cellspacing="0" border="0"> 
<tr> 
<td valign="top">Width:</td><td valign="top"> <input type="text" name="wid" id="wid" size="10" value="600"> e.g. '600' for 600px wide</td> 
</tr><tr> 
<td valign="top">Height:</td><td valign="top"> <input type="text" name="hei" id="hei" size="10" value="200"> e.g. '200' for 200px wide</td> 
</tr><tr> 
</tr> 
</table> 
<h2>What colour would you like your graph to be?</h2> 
<script type="text/javascript" src="jscolor/jscolor.js"></script> 
Type or click here: <input class="color" value="FF0066" size="10" name="graph_colour" id="graph_colour"> 
</li> 
</ul>
<input type="BUTTON" id="createcode" value="Create Code" />
<br />
<textarea id="code" row="10" cols="80">
</textarea>
<div id="tryit"></div>
<input type="BUTTON" id="try" value="Try it" />
</body>
</html>

